<template>
	<view class="card" :style="{ backgroundImage: `url(${backgroundImage})` }" @click="handleCardClick">
		<view class="content">
			<image class="image" :src="image"></image>
			<view class="left-content">
				<view class="title">{{ title }}</view>
				<view class="text">{{ text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkTodayRecord } from '@/api/system/check.js';

	export default {
		name: "DailyCheckCard",
		data() {
			return {
				backgroundImage: '/static/images/profile.png', // 默认背景图片
				image: '/static/images/smile.png', // 默认图片
				title: '每日打卡', // 默认文本
				text: '记录健康好心情', // 默认描述文本
				isChecked: false // 打卡状态
			};
		},
		methods: {
			async checkAndUpdateStatus() {
				try {
					const result = await checkTodayRecord();
					console.log(result);
					if (result===true) {
						this.title = '已打卡';
						this.text = '今日已完成打卡';
						this.isChecked = true;
						this.image= '/static/images/checked.png'; // 默认图片
					} else {
						this.title = '每日打卡';
						this.text = '记录健康好心情';
						this.isChecked = false;
					}
				} catch (error) {
					console.error('检查打卡状态失败:', error);
				}
			},
			handleCardClick() {
				if (this.isChecked) {
					console.log("今日已打卡，无法跳转");
					// 可以添加弹窗或其他提示用户已经打卡
				} else {
					this.goToCheck();
				}
			},
			goToCheck() {
				console.log("跳转到发表打卡");
				this.$tab.navigateTo(`/pages/check/index`);
				// uni.switchTab({
				// 	url: '/pages/check/check'
				// });
			},
		},
		mounted() {
			this.checkAndUpdateStatus(); // 组件挂载时检查打卡状态
		}
	}
</script>

<style scoped>
	.card {
		position: relative;
		width: 100%;
		max-width: 600px;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		background-size: cover;
	}

	.card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		position: relative; 
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30px;
		padding: 20rpx;
		color: #fff;
	}

	.left-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image {
		width: 40px !important;
		height: 40px !important;
	}

	.title {
		font-size: 18px;
		margin: 0;
	}

	.text {
		font-size: 16px;
		margin-top: 10rpx;
	}
</style>
